<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>CRM管理系统</title>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="js/layui/css/layui.css">
<script src="js/layui/layui.all.js" type="text/javascript"></script>

<style type="text/css">

.layui-body{
		position: relative;
		top: -50
}

/*左侧导航 使用方法：skin: 'sidebar' */
.layui-tree-skin-sidebar li i {
	color: rgba(255, 255, 255, .7);
	display: none;
}

.layui-tree-skin-sidebar li a cite {
	color: rgba(255, 255, 255, .7)
}

.layui-tree-skin-sidebar li .layui-tree-spread {
	display: block;
	position: absolute;
	right: 30px;
}

.layui-tree-skin-sidebar li {
	line-height: 45px;
	position: relative;
}

.layui-tree-skin-sidebar li ul {
	margin-left: 0;
	background: rgba(0, 0, 0, .3);
}

.layui-tree-skin-sidebar li ul a {
	padding-left: 20px;
}

.layui-tree-skin-sidebar li a {
	height: 45px;
	border-left: 5px solid transparent;
	box-sizing: border-box;
	width: 100%;
}

.layui-tree-skin-sidebar li a:hover {
	background: #4E5465;
	color: #fff;
	border-left: 5px solid #009688;
}

.layui-tree-skin-sidebar li a.active {
	background: #009688;
}
</style>
</head>

<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header" style="background-color: #3D3D3D">
			<div class="layui-logo">CRM管理系统</div>
			<!-- 头部区域（可配合layui已有的水平导航） -->

			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item">
				<a href="javascript:;">欢迎您: &nbsp;&nbsp;&nbsp;&nbsp;<span id="loginname"></span> </a>
				<!-- <dl class="layui-nav-child">
                        <dd><a href="">基本资料</a></dd>
                        <dd><a href="">安全设置</a></dd>
                    </dl> -->
			    </li>
			    <li id="zxxx" class="layui-nav-item layui-nav-itemed" style="display: none;" ><a href="javascript:void(0)"  id="wdxx" class="site-demo-active"  data-title="动态消息" data-menuId="1" data-src="sysM/dynamicmMessage.html" data-id="1"  data-type="tabAdd" onclick="">我的消息</a>
			    <!-- 	<dl class="layui-nav-child">
			    	<dd lay-id='+childmenu.id+'><a href="javascript:void(0)" class="site-demo-active"  data-title='+childmenu.name+' data-menuId='+childmenu.id+' data-src='+childmenu.path+' data-id='+childmenu.id+'data-type="tabAdd">'+childmenu.name+'</a></dd>
			    	</dl> -->
			    </li>
			   <li class="layui-nav-item"  id="checkIn" style="display: none"><a href="javascript:;" onclick="checkIn()">签到</a></li>
			   <li class="layui-nav-item"  id="checkOut" style="display: none"><a href="javascript:;"  onclick="checkOut()">签退</a></li>
				<li class="layui-nav-item"><a  id="return">退出</a></li>
			</ul>
		</div>

		<div class="layui-side layui-bg-black"  style="background-color: #3D3D3D!important;>
			<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
			<div class="layui-side-scroll">
					<ul id="left_nav"  lay-filter="test" class="layui-nav layui-nav-tree" style="background-color:  	#4A4A4A!important;color: white;">
					</ul>
			</div>
		</div>
	</div>

<div class="layui-body" style="overflow-y: hidden;">
    <!-- 内容主体区域 -->
    <div class="layui-tab"  lay-filter="demo"    lay-allowClose="true">
      <ul class="layui-tab-title">
      </ul>
      <div class="layui-tab-content" >
      </div>
    </div>
  </div>
	<div class="layui-footer">
		<!-- 底部固定区域 -->
	</div>
	
</body>

<script type="text/javascript">
$(function(){
	var id =window.localStorage.getItem("userid");
	var loginname =	window.localStorage.getItem("loginame");
	$("#loginname").html(loginname);
	getTree();
	
	$.ajax({
		url:"initIsCheckIn",
		data:{
		},
		dataType:"json",
		type:"get",
		success : function(res){
			//alert(res)
			if (res.success) {
				//alert(1)
				if(res.message=="是"){
					$("#checkIn").show();
					$("#checkOut").hide();
				}else{
					$("#checkIn").hide();
					$("#checkOut").show();
				}
			}else{
				//alert(2)
				$("#checkIn").show();
				//$("#checkOut").attr("style","display: none;");
			}
					
				}
			})
	
})

$(function (){
	var rid =window.localStorage.getItem("userid");
	layui.use(['layer','element'], function(){
		var  element = layui.element;
		  var  layer = layui.layer;
	$.ajax({
		url:"getCountDMByAskerId",
		data:{
			rid : rid
		},
		dataType:"json",
		type:"get",
		success : function(res){
			//alert(res)
			if (res.success) {
				$("#zxxx").show();
				if(res.message>0){
					
					var xx = res.message;
					var tis = "您有 "+xx+"  条未读消息！"
					layer.alert(tis,{
						  skin: 'layui-layer-molv', //样式类名  自定义样式
						  closeBtn: 1,    // 是否显示关闭按钮
						  anim: 1, //动画类型
						  btn: ['查看','关闭'], //按钮
						  icon: 6,    // icon
						  yes:function(){
							 // layer.msg('按钮1');
							  $("#wdxx").trigger('click');
							  layer.close(layer.index);
						  }
						 ,btn2:function(){
							 layer.msg('按钮2');
							 layer.close(layer.index)
							 }
						 });
				}
				
			}else{
				$("#zxxx").hide();
			}
					
				}
			})
	})
})
//用户签到
function checkIn(){
	layui.use('layer', function(){
		 
		  var  layer = layui.layer;

	
		  layer.confirm('确定要签到么',function (){//只有当点击confirm框的确定时，该层才会关闭
			$.ajax({
				url:"createUserCheck",
				data:{	
				},
				dataType:"json",
				type:"post",
				success : function(res){
						//alert(res.success);
							if(res.success){
								layer.msg(res.message);
								$("#checkIn").hide();
								$("#checkOut").show();
							}else{
								layer.msg(res.message);
								$("#checkIn").show();
								$("#checkOut").hide();
							}
							
						}
					})
				})
		})
}
//用户签退
function checkOut(){
	layui.use('layer', function(){
		 
		  var  layer = layui.layer;

	
		  layer.confirm('确定要签退么',function (){//只有当点击confirm框的确定时，该层才会关闭
			$.ajax({
				url:"UserCheckout",
				data:{	
				},
				dataType:"json",
				type:"post",
				success : function(res){
						//alert(res.success);
							if(res.success){
								layer.msg(res.message);
								$("#checkIn").show();
								$("#checkOut").hide();
							}else{
								layer.msg(res.message);
								$("#checkIn").hide();
								$("#checkOut").show();
							}
							
						}
					})
				})
		})
}



$("#return").click(function (){
	layui.use('layer', function(){
		 
		  var  layer = layui.layer;

	
		  layer.confirm('确定要退出么',function (){//只有当点击confirm框的确定时，该层才会关闭
			$.ajax({
				url:"loginOut",
				data:{	
				},
				dataType:"json",
				type:"post",
				success : function(res){
						//alert(res.success);
							if(res.success){
								window.location.href="login.html";
								//window.history.go(-1);
							}
							
						}
					})
				})
		})
})

function getTree(){
	
	$.ajax({
		url:"queryTree",
		type:"post",
		data:{},
		dataType:"json",
		success:function(res){
			//alert(3)
			//alert(res[0])
			if(res[0] ==1){
				window.location.href="login.html";
			}else{
				loadnav(res);
			}
					/* if(res !=null &&res !=""){
						alert(1)
						loadnav(res);
					}else{
						alert(2)
						
					} */
						
					
				}
			})
		}

	/**
	 * ifrme自适应页面高度，需要设定min-height
	 * @param iframe
	 */
	function setIframeHeight(iframe) {
	    if (iframe) {
	        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
	        if (iframeWin.document.body) {
	            iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
	            iframe.width = iframeWin.document.documentElement.scrollWidth || iframeWin.document.body.scrollWidth;
	        }
	        
	    }
	};

function loadnav (navdata) {
    for (var i=0;i<navdata.length;i++) {
        var  first_menu=navdata[i];
        
         var  childMenus=first_menu.children;
      //   alert(childMenus)
         //console.log("子菜单=="+JSON.stringify(childMenus));
         if(childMenus==null||childMenus==undefined||childMenus==""){
             //console.log("没有子菜单=="+first_menu.name);
             loadTopMenu(first_menu);
         }else{
              //console.log("有子菜单=="+first_menu.name);
              loadHasChildMenu(first_menu);
          }
    }
   //列表添加完后再次执行渲染
   xuanran();
}
//加载带有子菜单的
function loadHasChildMenu(data){
    var fragment = $("#left_nav");
    var list = ('<li class="layui-nav-item layui-nav-itemed"  >');
    var lz = ('</li>');
   // list.className="layui-nav-item layui-nav-itemed";
    var child_one_Html='<a href="javascript:void(0)">'+data.name+'</a>';
    var childmenus=data.children;
    var child_two_Html='<dl class="layui-nav-child">';
    var childHtmls="";
    for (var i=0;i<childmenus.length;i++) {
        var childmenu=childmenus[i];
        var childHtml='<dd lay-id='+childmenu.id+'><a href="javascript:void(0)" class="site-demo-active"  data-title='+childmenu.name+' data-menuId='+childmenu.id+' data-src='+childmenu.path+' data-id='+childmenu.id+'data-type="tabAdd">'+childmenu.name+'</a></dd>';
        childHtmls+=childHtml; 
    }
    child_two_Html +=childHtmls+'</dl>';
   var caidan =list+child_one_Html+child_two_Html+lz;
  // alert(caidan)
    //fragment.appendChild(list);
    fragment.append(caidan);
    console.log("2.=多级菜单列表加载完毕");
}
//加载顶级菜单(没有子菜单)
function loadTopMenu(data){
    var fragment = $("#left_nav");
    fragment.append('<li class="layui-nav-item"><a href="javascript:void(0)" class="site-demo-active" data-title='+data.name+' data-menuId='+data.id+' data-src='+data.path+' data-id='+childmenu.id+'>'+data.name+'</a></li>')
   /*  var list = document.createElement('li'); 
    list.className="layui-nav-item";
    list.innerHTML='<a class="site-demo-active" data-title='+data.name+' data-menuId='+data.menuId+' data-src='+data.url+'>'+data.name+'</a>';
    fragment.appendChild(list); */
    console.log("1.=顶级菜单列表加载完毕"); 
}

$(function (){
	xuanran();
})


function xuanran() {
    layui.use(['element','layer'], function(){
      var element = layui.element;
      layer=layui.layer;
      /* var left = $("#left_nav");
      var layFilter = left.attr('lay-filter'); */
      
      var layFilter = $("#left_nav").attr('lay-filter');
      element.render('nav', layFilter); 
      
      var active = {
        //在这里给active绑定几项事件，后面可通过active调用这些事件
        tabAdd: function (name,url, id ) {
            //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
          
            var body_url=url;
            //alert(id)
            //alert(name)
            console.log("要切换的页面地址="+body_url);
            element.tabAdd('demo', {
                title: name,
                content: '<iframe data-frameid="' + id + '"  src="' + body_url + '"width="100%" style="min-height: 650px;" frameborder="0" scrolling="auto" onload="setIframeHeight(this)"></iframe>',
                id: id //规定好的id
            })
          //  FrameWH();  //计算ifram层的大小
        },
        tabChange: function (id) {
            //切换到指定Tab项
            element.tabChange('demo', id); //根据传入的id传入到指定的tab项
        },
        tabDelete: function (id) {
            element.tabDelete("demo", id);//删除
        }
      };      
      // //当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
      $('.site-demo-active').on('click', function () {
           var dataid = $(this);
          // alert(dataid)
           var lid = dataid.attr("data-menuId");
         //  alert($(".layui-tab-title li[lay-id]").length)
           if ($(".layui-tab-title li[lay-id]").length <= 0) {
               //如果比零小，则直接打开新的tab项

               console.log("没有tab页，新建tab页");
            active.tabAdd(dataid.attr("data-title"),dataid.attr("data-src"), dataid.attr("data-menuId"));
         } else {
              //否则判断该tab项是否以及存在
              var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
              $.each($(".layui-tab-title li[lay-id]"), function () {
                  //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
              /*   alert(2)
                  alert($(this).attr("lay-id")) */
                  if ($(this).attr("lay-id") == dataid.attr("data-menuId")) {
                      
                	  console.log("如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开");
                    isData = true;                     
               }
              })
              if (isData == false) {
                //标志为false 新增一个tab项
                console.log("新增一个tab项")
                active.tabAdd(dataid.attr("data-title"),dataid.attr("data-src"), dataid.attr("data-menuId"));
              }
         }
        //最后不管是否新增tab，最后都转到要打开的选项页面上
        active.tabChange(dataid.attr("data-menuId"));
      }); 
    })
    console.log("==列表添加完后再次执行渲染");
}
				
</script>
</html>